<template>
  <div class="settings-payment">
    <a-card class="settings-card">
      <template #title>支付设置</template>
      <a-form :model="paymentForm" layout="vertical">
        <div class="settings-group">
          <div class="group-title">收款账户</div>
          <a-alert class="mb-4" type="warning">
            请确保填写的账户信息准确无误，以免影响资金结算
          </a-alert>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                field="accountName"
                label="开户名"
                :rules="[{ required: true, message: '请输入开户名' }]"
              >
                <a-input
                  v-model="paymentForm.accountName"
                  placeholder="请输入开户名"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="accountType"
                label="账户类型"
                :rules="[{ required: true, message: '请选择账户类型' }]"
              >
                <a-radio-group v-model="paymentForm.accountType">
                  <a-radio value="personal">个人账户</a-radio>
                  <a-radio value="company">对公账户</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                field="bankName"
                label="开户银行"
                :rules="[{ required: true, message: '请选择开户银行' }]"
              >
                <a-select
                  v-model="paymentForm.bankName"
                  placeholder="请选择开户银行"
                >
                  <a-option value="ICBC">中国工商银行</a-option>
                  <a-option value="ABC">中国农业银行</a-option>
                  <a-option value="BOC">中国银行</a-option>
                  <a-option value="CCB">中国建设银行</a-option>
                  <a-option value="PSBC">中国邮政储蓄银行</a-option>
                  <a-option value="CMB">招商银行</a-option>
                  <a-option value="CIB">兴业银行</a-option>
                  <a-option value="SPDB">浦发银行</a-option>
                  <a-option value="CMBC">民生银行</a-option>
                  <a-option value="PAB">平安银行</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="bankBranch"
                label="开户支行"
                :rules="[{ required: true, message: '请输入开户支行' }]"
              >
                <a-input
                  v-model="paymentForm.bankBranch"
                  placeholder="请输入开户支行名称"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item
            field="bankAccount"
            label="银行账号"
            :rules="[
              { required: true, message: '请输入银行账号' },
              { match: /^\d{16,19}$/, message: '请输入正确的银行账号' },
            ]"
          >
            <a-input
              v-model="paymentForm.bankAccount"
              placeholder="请输入银行账号"
              allow-clear
            />
          </a-form-item>
        </div>

        <a-divider />

        <div class="settings-group">
          <div class="group-title">结算设置</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item
                field="settlementType"
                label="结算周期"
                :rules="[{ required: true, message: '请选择结算周期' }]"
              >
                <a-radio-group v-model="paymentForm.settlementType">
                  <a-space direction="vertical">
                    <a-radio value="T1">
                      <span class="settlement-option">
                        T+1结算
                        <a-tag size="small" color="green">推荐</a-tag>
                        <div class="option-desc">订单完成后次日结算</div>
                      </span>
                    </a-radio>
                    <a-radio value="T7">
                      <span class="settlement-option">
                        T+7结算
                        <div class="option-desc">订单完成后7天结算</div>
                      </span>
                    </a-radio>
                    <a-radio value="T30">
                      <span class="settlement-option">
                        月结
                        <div class="option-desc">每月1号统一结算上月订单</div>
                      </span>
                    </a-radio>
                  </a-space>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="minAmount"
                label="最低结算金额"
                :rules="[{ required: true, message: '请设置最低结算金额' }]"
              >
                <div class="amount-setting">
                  <a-input-number
                    v-model="paymentForm.minAmount"
                    :min="100"
                    :max="10000"
                    :step="100"
                    prefix="￥"
                    placeholder="请输入最低结算金额"
                  />
                  <div class="amount-tip">
                    当可结算金额达到该值时自动发起结算，最低100元
                  </div>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item field="autoSettlement">
            <a-checkbox v-model="paymentForm.autoSettlement">
              开启自动结算（满足结算金额时自动发起结算）
            </a-checkbox>
          </a-form-item>
        </div>

        <a-divider />

        <div class="settings-group">
          <div class="group-title">支付方式</div>
          <a-form-item
            field="paymentMethods"
            :rules="[
              {
                validator: (value) => value && value.length > 0,
                message: '请至少选择一种支付方式',
              },
            ]"
          >
            <a-checkbox-group v-model="paymentForm.paymentMethods">
              <a-space direction="vertical" :style="{ width: '100%' }">
                <a-checkbox value="alipay">
                  <div class="payment-method">
                    <icon-alipay-circle class="payment-icon alipay" />
                    <div class="method-info">
                      <span class="method-name">支付宝</span>
                      <div class="method-desc">支持手机支付宝、扫码支付</div>
                    </div>
                    <a-button
                      v-if="!paymentForm.alipayConfigured"
                      type="text"
                      @click="handleConfigAlipay"
                    >
                      配置
                    </a-button>
                    <a-tag v-else color="green">已配置</a-tag>
                  </div>
                </a-checkbox>
                <a-checkbox value="wechat">
                  <div class="payment-method">
                    <icon-wechat class="payment-icon wechat" />
                    <div class="method-info">
                      <span class="method-name">微信支付</span>
                      <div class="method-desc">支持微信支付、小程序支付</div>
                    </div>
                    <a-button
                      v-if="!paymentForm.wechatConfigured"
                      type="text"
                      @click="handleConfigWechat"
                    >
                      配置
                    </a-button>
                    <a-tag v-else color="green">已配置</a-tag>
                  </div>
                </a-checkbox>
                <a-checkbox value="unionpay">
                  <div class="payment-method">
                    <icon-credit-card class="payment-icon unionpay" />
                    <div class="method-info">
                      <span class="method-name">银联支付</span>
                      <div class="method-desc">支持储蓄卡、信用卡支付</div>
                    </div>
                    <a-button
                      v-if="!paymentForm.unionpayConfigured"
                      type="text"
                      @click="handleConfigUnionpay"
                    >
                      配置
                    </a-button>
                    <a-tag v-else color="green">已配置</a-tag>
                  </div>
                </a-checkbox>
              </a-space>
            </a-checkbox-group>
          </a-form-item>
        </div>

        <a-divider />

        <div class="settings-group">
          <div class="group-title">交易设置</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="refundPeriod" label="退款期限">
                <a-select v-model="paymentForm.refundPeriod">
                  <a-option value="7">7天</a-option>
                  <a-option value="15">15天</a-option>
                  <a-option value="30">30天</a-option>
                </a-select>
                <div class="form-tip">买家在订单完成后可申请退款的期限</div>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="refundReview" label="退款审核">
                <a-radio-group v-model="paymentForm.refundReview">
                  <a-radio value="auto">自动通过</a-radio>
                  <a-radio value="manual">人工审核</a-radio>
                </a-radio-group>
                <div class="form-tip">设置退款申请的处理方式</div>
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSavePayment">
              保存设置
            </a-button>
            <a-button @click="handleReset"> 重置 </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>

    <a-modal
      v-model:visible="showAlipayModal"
      title="支付宝配置"
      @cancel="closeAlipayModal"
      @ok="handleSaveAlipayConfig"
    >
      <a-form :model="alipayConfig" layout="vertical">
        <a-form-item field="appId" label="AppID">
          <a-input
            v-model="alipayConfig.appId"
            placeholder="请输入支付宝应用ID"
          />
        </a-form-item>
        <a-form-item field="publicKey" label="支付宝公钥">
          <a-textarea
            v-model="alipayConfig.publicKey"
            placeholder="请输入支付宝公钥"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
        <a-form-item field="privateKey" label="商户私钥">
          <a-textarea
            v-model="alipayConfig.privateKey"
            placeholder="请输入商户私钥"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      v-model:visible="showWechatModal"
      title="微信支付配置"
      @cancel="closeWechatModal"
      @ok="handleSaveWechatConfig"
    >
      <a-form :model="wechatConfig" layout="vertical">
        <a-form-item field="appId" label="AppID">
          <a-input
            v-model="wechatConfig.appId"
            placeholder="请输入微信应用ID"
          />
        </a-form-item>
        <a-form-item field="mchId" label="商户号">
          <a-input
            v-model="wechatConfig.mchId"
            placeholder="请输入微信商户号"
          />
        </a-form-item>
        <a-form-item field="apiKey" label="API密钥">
          <a-input-password
            v-model="wechatConfig.apiKey"
            placeholder="请输入API密钥"
          />
        </a-form-item>
        <a-form-item field="certFile" label="API证书">
          <a-upload
            :limit="1"
            :file-list="wechatConfig.certFile"
            @change="handleCertFileChange"
          >
            <template #upload-button>
              <a-button>上传证书文件</a-button>
            </template>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      v-model:visible="showUnionpayModal"
      title="银联支付配置"
      @cancel="closeUnionpayModal"
      @ok="handleSaveUnionpayConfig"
    >
      <a-form :model="unionpayConfig" layout="vertical">
        <a-form-item field="merId" label="商户号">
          <a-input
            v-model="unionpayConfig.merId"
            placeholder="请输入银联商户号"
          />
        </a-form-item>
        <a-form-item field="signCert" label="签名证书">
          <a-upload
            :limit="1"
            :file-list="unionpayConfig.signCert"
            @change="handleSignCertChange"
          >
            <template #upload-button>
              <a-button>上传签名证书</a-button>
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item field="encryptKey" label="加密密钥">
          <a-input-password
            v-model="unionpayConfig.encryptKey"
            placeholder="请输入加密密钥"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import {
  IconAlipayCircle,
  IconWechat,
  IconCreditCard,
} from "@arco-design/web-vue/es/icon";

const paymentForm = reactive({
  accountName: "",
  accountType: "company",
  bankName: "",
  bankBranch: "",
  bankAccount: "",
  settlementType: "T1",
  minAmount: 100,
  autoSettlement: true,
  paymentMethods: ["alipay", "wechat"],
  alipayConfigured: false,
  wechatConfigured: false,
  unionpayConfigured: false,
  refundPeriod: "7",
  refundReview: "manual",
});

const showAlipayModal = ref(false);
const alipayConfig = reactive({
  appId: "",
  publicKey: "",
  privateKey: "",
});

const showWechatModal = ref(false);
const wechatConfig = reactive({
  appId: "",
  mchId: "",
  apiKey: "",
  certFile: [],
});

const showUnionpayModal = ref(false);
const unionpayConfig = reactive({
  merId: "",
  signCert: [],
  encryptKey: "",
});

const handleConfigAlipay = () => {
  showAlipayModal.value = true;
};

const handleSaveAlipayConfig = () => {
  paymentForm.alipayConfigured = true;
  showAlipayModal.value = false;
  Message.success("支付宝配置已保存");
};

const closeAlipayModal = () => {
  showAlipayModal.value = false;
};

const handleConfigWechat = () => {
  showWechatModal.value = true;
};

const handleSaveWechatConfig = () => {
  paymentForm.wechatConfigured = true;
  showWechatModal.value = false;
  Message.success("微信支付配置已保存");
};

const closeWechatModal = () => {
  showWechatModal.value = false;
};

const handleCertFileChange = (fileList) => {
  wechatConfig.certFile = fileList;
};

const handleConfigUnionpay = () => {
  showUnionpayModal.value = true;
};

const handleSaveUnionpayConfig = () => {
  paymentForm.unionpayConfigured = true;
  showUnionpayModal.value = false;
  Message.success("银联支付配置已保存");
};

const closeUnionpayModal = () => {
  showUnionpayModal.value = false;
};

const handleSignCertChange = (fileList) => {
  unionpayConfig.signCert = fileList;
};

const handleSavePayment = () => {
  Message.success("支付设置已保存");
};

const handleReset = () => {
  Object.assign(paymentForm, {
    accountName: "",
    accountType: "company",
    bankName: "",
    bankBranch: "",
    bankAccount: "",
    settlementType: "T1",
    minAmount: 100,
    autoSettlement: true,
    paymentMethods: ["alipay", "wechat"],
    alipayConfigured: false,
    wechatConfigured: false,
    unionpayConfigured: false,
    refundPeriod: "7",
    refundReview: "manual",
  });
  Message.info("设置已重置");
};
</script>

<style lang="scss" scoped>
.settings-payment {
  .settings-card {
    margin-bottom: 1.5rem;

    .settings-group {
      margin-bottom: 1.5rem;

      .group-title {
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 1rem;
      }
    }
  }

  .settlement-option {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    .option-desc {
      font-size: 0.875rem;
      color: #6b7280;
    }
  }

  .amount-setting {
    .amount-tip {
      margin-top: 0.5rem;
      font-size: 0.875rem;
      color: #6b7280;
    }
  }

  .payment-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;

    .payment-icon {
      font-size: 2rem;

      &.alipay {
        color: #1677ff;
      }

      &.wechat {
        color: #07c160;
      }

      &.unionpay {
        color: #d81e06;
      }
    }

    .method-info {
      flex: 1;

      .method-name {
        font-weight: 500;
      }

      .method-desc {
        font-size: 0.875rem;
        color: #6b7280;
      }
    }
  }

  .form-tip {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6b7280;
  }

  :deep(.arco-form-item-wrapper) {
    .arco-input-number {
      width: 200px;
    }
  }

  .mb-4 {
    margin-bottom: 1rem;
  }
}
</style>
